
import React, { useState, useEffect } from 'react';
import { Column } from '@ant-design/charts';

const AntDesignChart = () => {
    const [data, setData] = useState([]);
    useEffect(() => {
      asyncFetch();
    }, []);
    const asyncFetch = () => {
      fetch('https://gw.alipayobjects.com/os/bmw-prod/be63e0a2-d2be-4c45-97fd-c00f752a66d4.json')
        .then((response) => response.json())
        .then((json) => {
            console.log(json);
            setData(json)
        })
        .catch((error) => {
          console.log('fetch data failed', error);
        });
    };
    var config = {
      data: data,
      xField: '城市',
      yField: '销售额',
      xAxis: { label: { autoRotate: false } },
      scrollbar: { type: 'horizontal' },
    };
    return (
        <div>
            <Column {...config} />;
        </div>
    )
}

export default AntDesignChart


